<template>
  <div class="login_container">
    <!--logo-->
    <div class="login_logo">
      <img :src="logoSrc" alt="加载失败" class="logo"/>
    </div>

    <!--提示部分-->
    <div class="prompt">
      <h2>登录</h2>
      <p>注册登录后体验更精彩</p>
    </div>

    <!--表单-->
    <div class="login_form">
      <van-row class="form_item">
        <van-col span="3" class="item_content">
           <span class="icon_container">
             <i class="fa  fa-mobile-phone"></i>
           </span>
        </van-col>
        <van-col span="21" class="item_content">
          <input type="tel" placeholder="请输入手机号码" v-model="loginParams.account" class="inputItem"
                 @blur="validatePhone"/>
        </van-col>
      </van-row>
      <van-row class="form_item">
        <van-col span="3" class="item_content">
           <span class="lock">
             <i class="fa  fa-lock"></i>
           </span>
        </van-col>
        <van-col span="21" class="item_content">
          <input type="password" placeholder="请输入密码" v-model="loginParams.password" class="inputItem"
                 @blur="validatePassword"/>
        </van-col>
      </van-row>
    </div>

    <!--提示-->
    <div class="login-tips">
      <span @click="forgetPwd()" class="forget-pwd">忘记密码？</span>
      <span @click="goRegister()">立即注册</span>
    </div>
    <p class="remember">
      <van-checkbox v-model="isSave" shape="square" class="icon">记住密码</van-checkbox>
    </p>
    <div class="loginButton">
      <van-button round type="primary" @click="submitLogin" :loading="loading" class="btn">
        登录
        <i class="fa fa-long-arrow-right"></i>
      </van-button>
    </div>
  </div>
</template>

<script>
//加载本地加密模块
let Base64 = require('js-base64').Base64;
import jwt_decode from "jwt-decode";
import {mobileReg} from "@/Regular/regx";

export default {
  name: "Login",

  data() {
    return {
      isSave: false,
      // logo路径
      logoSrc: require("./../assets/Images/logo.jpg"),
      // 登录参数
      loginParams: {
        account: "",
        password: ""
      },
      // 验证结果
      isValidateAccount: false,
      isValidatePassword: false,
      loading: false
    }
  },

  created() {
    if (localStorage.eleToken) {
      this.$toast.success('您已经登录过了');
      this.$router.push('/index');
    }

    let saveItem = localStorage.getItem("remember");
    if (saveItem) {
      saveItem = JSON.parse(saveItem);
      this.loginParams.account = Base64.decode(saveItem.account);
      this.loginParams.password = Base64.decode(saveItem.password);
    }
  },

  mounted() {
    let height = document.documentElement.clientHeight || body.documentElement.clientHeight;
    let htmlDom = document.querySelector(".login_container");
    htmlDom.style.height = height + "px";
  },

  methods: {
    // 验证手机号和密码
    validatePhone() {
      if (this.loginParams.account === "") {
        this.$toast("请填写手机号码");
        this.isValidateAccount = false;
        return;
      }
      if (!mobileReg.test(this.loginParams.account)) {
        this.$toast("请填写正确的手机号码");
        this.isValidateAccount = false;
        return;
      }
      this.isValidateAccount = true;
    },
    validatePassword() {
      if (this.loginParams.password === "") {
        this.$toast("请填写密码");
        this.isValidatePassword = false;
        return;
      }
      this.isValidatePassword = true;
    },
    // 忘记密码
    forgetPwd() {
      this.$dialog.alert({
        title: "提示",
        message: "请联系客服 QQ 2496992771 重置密码"
      });
    },
    //重定向到注册页面
    goRegister() {
      this.$router.push("/register");
    },

    //提交登录数据
    async submitLogin() {
      // 开启加载状态
      this.loading = true;
      this.validatePhone();
      this.validatePassword();
      //验证手机号规则
      if (!this.isValidatePassword || !this.isValidateAccount) {
        this.$toast("请检查手机号码和密码");
        this.loading = false;
        return;
      }

      //存储账号和密码
      if (this.isSave) {
        let remember = {
          account: Base64.encode(this.loginParams.account),
          password: Base64.encode(this.loginParams.password)
        };
        // 存储相关信息为的是记住密码
        localStorage.setItem("remember", JSON.stringify(remember));
      }

      let res = await this.$axios.post(this.$api.doLogin, this.loginParams);
      //判断返回值
      if (res.status === 200 && res.data.code === 200) {
        //存储到解析完成后存储到localStorage中
        if (!localStorage.getItem("eleToken")) {
          localStorage.setItem("eleToken", res.data.token);
        } else {
          localStorage.clear("eleToken");
          localStorage.setItem("eleToken", res.data.token);
        }
        //解析token
        let decode = jwt_decode(res.data.token);
        // 解析完成后存储到vuex中
        this.$store.dispatch("setUser", decode);

        // 并实现跳转
        this.loading = false;
        this.$router.push("/index");
        this.$toast.success("登录成功");
      } else {
        this.loading = false;
        this.$toast(res.data.message);
      }
    }
  }
}
</script>

<style scoped lang="less">

.login_container {

  .login_logo {
    padding-top: 1rem;

    .logo {
      width: 100%;
      height: 100%;
    }
  }

  .prompt {
    padding: 0 1rem;

    h2 {
      padding: 0;
      margin: 0;
    }

    p {
      margin: 0;
      margin-top: .5rem;
      color: #cccccc;
    }
  }

  .login_form {
    padding: 0 1rem;
    margin-top: 2rem;

    .form_item {
      padding: .4rem 0;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom: 1px solid #000;
      margin-bottom: .8rem;

      .item_content {
        height: 2rem;

        .icon_container {
          display: block;
          width: 100%;
          height: 100%;
          font-size: 1.5rem;
          line-height: 2rem;

          i {
            margin-left: 30%;
          }
        }

        .lock {
          display: block;
          width: 100%;
          height: 100%;
          font-size: 1.3rem;
          line-height: 2rem;

          i {
            margin-left: 30%;
          }
        }

        .inputItem {
          width: 100%;
          height: 2rem;
          padding: 0;
          border: none;
        }
      }

      &:hover {
        border: none;
        border-radius: .4rem;
        box-shadow: 0 0 10px #ccc;
      }
    }

  }

  .login-tips {
    display: flex;
    justify-content: space-between;
    padding: 0 22px;
    font-size: 14px;
    color: #4C4C4C;
  }

  .remember {
    margin-bottom: 0;
    padding-left: 1.3rem;

    .icon {
      font-size: .6rem;
    }
  }

  .loginButton {
    margin-top: 3rem;
    text-align: right;

    .btn {
      width: 30%;
      margin-right: 1rem;
      border: none;
      background-color: #786AE4;
    }
  }
}


</style>